<template>
  <div class='chart-container both-100'>
    <div class="chart" :style="{ width: width, height: height }">
      <ResponsiveBarChart ref="chart" :options="chartOptions" :hasGeoroam="true" @bar-clicked="onBarClicked" @georoam="onGeoroam" :test="test" />
      <!-- <div class="pop-up-point">
        <div class="point-title"><span class="icon iconfontShuzhi icon-gaojing"></span><span>告警</span></div>
        <div class="container">
          <img src="" alt="">
          <div class="con">
            <p class="title">新罗区烟草专卖局</p>
            <div>
              <p><span class="icon iconfontShuzhi icon-baojing"></span><span class="txt">3楼左厅温度偏高告警</span></p>
              <p><span class="icon iconfontShuzhi icon-shijian"></span><span class="txt">2022-11-30 14:25:15</span></p>
              <p><span class="icon iconfontShuzhi icon-dingwei"></span><span class="txt">龙岩市新罗区西安南路52号</span></p>
            </div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import ResponsiveBarChart from '@/components/echarts/ResponsiveBarChart.vue';
import axios from 'axios';
import exampleImage from '@/assets/images/points/厨房AI智能分析摄像机.png';
export default {
  name: 'LongyanMap',
  props: {
    width: {
      type: String,
      default: '960px'
    },
    height: {
      type: String,
      default: '700px'
    },
    mapData: {
      type: Array,
      default: () => [
      //   {
      //   "uuid": 0,
      //   "name": "双胞胎饲料有限公司",
      //   "longitude": 117.02,
      //   "latitude": 25.08,
      //   "img": exampleImage,
      //   "value": 1
      // },
      ]
    },
    onClick:{
      type: Function,
      default: (params) => {
        console.log(params)
      }
    }
  },
  data() {
    return {
      option: {
        color: 'rgb(40, 227, 242)',
        legend: false,
        areaStyle: false,
        name: '地图'
      },
      chartOptions: {},
      colors: ['#FF3838', '#FF6A3A', '#FFD03B', '#66E1DF'],
      test: '123',
    };
  },
  computed: {
    ...mapState('config', ['inFilePrefix']),
  },
  watch:{
    mapData:{
      handler(){
        this.setOptions()
      }
    }
  },
  created() {
    this.browserPatch()

    // 地图渲染
    this.getMapJson()
  },
  mounted() {
  },
  methods: {
    getChart(){
      return this.$refs.chart
    },
    // 去除浏览器的被动事件监听器报错
    browserPatch() {
      if (typeof EventTarget !== 'undefined') {
        const func = EventTarget.prototype.addEventListener
        EventTarget.prototype.addEventListener = function (type, fn, capture) {
          this.func = func
          if (typeof capture !== 'boolean') {
            capture = capture || {}
            capture.passive = false
          }
          this.func(type, fn, capture)
        }
      }
    },
    onBarClicked(params) {
      this.onClick(params.data);
      this.$emit("onClick", params.data, params)
    },
    // 监听放大缩小漫游
    onGeoroam(params, chart) {
      var opt = chart.getOption()

      var optObj = opt.geo[0]

      for (let i = 0; i < opt.geo.length; i++) {
        let item = opt.geo[i]
        item.zoom = optObj.zoom
        item.center = optObj.center
      }
      this.$set(this, 'chartOptions', opt)
    },
    // 获取 series 数据
    getSeriesData(){
      var setData = (data) => {
        var newArr = []
        for (var i = 0; i < data.length; i++) {
          let item = data[i]
          var serie = {
            name: item.name || '数据项名称',
            symbol: 'image://' + item.img,
            symbolSize: item.symbolSize,
            ...item
          }
          // echart散点图的value 是 x和y轴的值，对应经纬度
          serie.value = [
            item.longitude,
            item.latitude,
          ]
          newArr.push(serie)
        }

        return newArr
      }
      return setData(this.mapData)
    },
    // 组织option
    getOption() {

      var setGeo = (obj) => {
        return {
          map: 'pinghe',
          zoom: 1.1,
          layoutCenter: ['50%', '50%'],
          layoutSize: '100%',
          z: 10,
          roam: true,
          animationDurationUpdate: 0,
          itemStyle: { //地图区域的多边形 图形样式
            borderWidth: 1,
            borderColor: 'rgba(16, 155, 248, 0.4)',
            areaColor: 'transprent',
          },
          emphasis: {
            itemStyle: {
              areaColor: '#3C617B'
            },
            label: {
              color: "#f3f6ff"
            }
          },
          aspectScale: 1,
          silent: true,
          ...obj
        }
      }

      var eOption = {
        tooltip: {
          trigger: 'item',
          confine: true,
          borderColor: 'rgba(143, 171, 191, 0.30)',
          backgroundColor: 'rgba(18, 24, 29, 0.90)',
          textStyle: {
            color: 'white'
          },
          formatter: "{b}"
          
          // trigger: 'item',
          // showDelay: 0,
          // position: 'top',
          // transitionDuration: 0.2,
          // renderMode: 'html',
          // backgroundColor: 'transparent',
          // padding: 0,
          // borderWidth: 0,
          // alwaysShowContent: true,
          // extraCssText: 'box-shadow: unset',
          // formatter: (params, ticket, callback) => {
          //   return `<div class="pop-up-point">
          //               <div class="point-title"><span class="icon iconfontShuzhi icon-gaojing"></span><span>告警</span></div>
          //               <div class="container">
          //                 <img src="${this.inFilePrefix}" alt="">
          //                 <div class="con">
          //                   <p class="title">${params.name}</p>
          //                   <div>
          //                     <p><span class="icon iconfontShuzhi icon-baojing"></span><span class="txt">3楼左厅温度偏高告警</span></p>
          //                     <p><span class="icon iconfontShuzhi icon-shijian"></span><span class="txt">2022-11-30 14:25:15</span></p>
          //                     <p><span class="icon iconfontShuzhi icon-dingwei"></span><span class="txt">龙岩市新罗区西安南路52号</span></p>
          //                   </div>
          //                 </div>
          //               </div>
          //             </div>`
          // }
        },
        geo: [
          setGeo({
            label: {
              show: true,
              color: "white"
            }
          }),
          setGeo({
            map: 'pingheOutline',
            layoutCenter: ['50.1%', '50.5%'],
            z: 9,
            roam: false,
            itemStyle: { //地图区域的多边形 图形样式
              borderWidth: 1,
              borderColor: "#109BF8",
              areaColor: {
                type: 'linear',
                x: 1,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#3C617B' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#3C617B' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },

            },
          }),
          setGeo({
            map: 'pingheOutline',
            layoutCenter: ['50.2%', '51%'],
            z: 8,
            roam: false,
            itemStyle: { //地图区域的多边形 图形样式
              borderWidth: 5,
              borderColor: "rgba(16, 155, 248, .5)",
              areaColor: 'transparent',
            }
          }),
          setGeo({
            map: 'pingheOutline',
            layoutCenter: ['50.5%', '51.5%'],
            z: 7,
            roam: false,
            itemStyle: { //地图区域的多边形 图形样式
              borderWidth: 1,
              borderColor: 'rgba(16, 155, 248, .5)',
              areaColor: 'transparent',
            }
          }),
          setGeo({
            map: 'pingheOutline',
            layoutCenter: ['50.5%', '52.5%'],
            z: 6,
            roam: false,
            itemStyle: { //地图区域的多边形 图形样式
              borderWidth: 1,
              borderColor: 'rgba(16, 155, 248, .8)',
              areaColor: 'rgba(131, 203, 252, .1)',
            }
          }),
          // setGeo({
          //   map: 'pingheOutline',
          //   layoutCenter: ['51%', '56%'],
          //   z: 5,
          //   roam: false,
          //   itemStyle: { //地图区域的多边形 图形样式
          //     borderWidth: 1,
          //     borderColor: 'rgba(5, 204, 188, .3)',
          //     areaColor: 'rgba(5, 204, 188, .1)',
          //   }
          // }),
          // setGeo({
          //   map: 'pingheOutline',
          //   layoutCenter: ['51%', '56.5%'],
          //   z: 4,
          //   roam: false,
          //   itemStyle: { //地图区域的多边形 图形样式
          //     borderWidth: 1,
          //     borderColor: 'rgba(5, 204, 188, .2)',
          //     areaColor: 'rgba(5, 204, 188, .1)',
          //     shadowColor: '#000',
          //     shadowBlur: 20,
          //     shadowOffsetX: 5,
          //     shadowOffsetY: 25,
          //   }
          // })
        ],
        series: [
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            symbol: function (value, params) {
              return params.data.img;
            },
            symbolSize: [28, 40],
            // symbolSize: [28, 50],
            emphasis: {
              scale: 1.2
            },
            data: this.getSeriesData()
          }
        ]
      };

      return eOption    
    },
    setOptions(){
      this.chartOptions = {
        index: 0,
        series:[{
          data: this.getSeriesData()
        }]
      }
    },
    // 获取地图数据
    getMapJson(){
      axios.get(process.env.VUE_APP_PRE_PATH + 'mapData/longyan.json', {}).then(res => {
        this.$echarts.registerMap('pingheOutline', res.data);
        this.$echarts.registerMap('pinghe', res.data);
        this.chartOptions = this.getOption()
      }).catch(err => {
        console.log('获取地图数据错误', err)
      })
    }
  },
  components: {
    ResponsiveBarChart
  },
}
</script>

<style lang='less' scoped>
/deep/ .pop-up-point {
  width: 350px;
  min-height: 160px;
  background: url("@/assets/images/pop-point-bg.png") no-repeat;
  background-size: 100% 100%;
  padding: 10px;

  .point-title {
    font-size: 16px;
    color: white;
    padding-left: 10px;
    margin-bottom: 10px;

    .icon {
      margin-right: 5px;
    }
  }

  .container {
    display: flex;

    .con {
      flex: 1;

      .title {
        font-size: 16px;
        margin-bottom: 5px;
        margin-top: -5px;
        color: white;
      }

      div {
        padding-bottom: 20px;

        >p {
          margin-bottom: 5px;
          display: flex;
          color: #D9E7FF;

          .icon {
            margin-right: 5px;
          }
        }
      }
    }
  }

  img {
    width: 110px;
    height: 85px;
    margin: 0 10px 0 5px;
  }
}</style>